<template>
	<view class="pageview">
		<zx-nav title=" " noBack bg="transparent" color="#fff"></zx-nav>
		<view class="top-wrap"></view>
		<!-- 个人信息 -->
		<view class="userinfo">
			<!-- <u-avatar class="avatar" :size="180" :src="userInfo.avatar||'/static/avatar/avatar3.png'"></u-avatar> -->
			<u-avatar class="avatar" :size="180" v-if="userInfo.avatar"  :src="filterUrl + userInfo.avatar.split(';')[0]"></u-avatar>
			<u-avatar class="avatar" v-else :size="180" :src="'/static/avatar/doctor.png'"></u-avatar>
			<div class="changePwd" @click="navTo('/pages/mine/changPwd')">修改密码</div>
			<view class="list">
				<view class="item u-flex u-flex-center u-flex-between">
					<view>昵称</view><view class="name">{{ userInfo.realName }}</view>
				</view>
				<view class="item u-flex u-flex-center u-flex-between">
					<view>账户</view><view class="account">{{ userInfo.username }}</view>
				</view>
			</view>
		</view>
		<view class="footerBar">
			<view class="loginBtn">
				<u-button type="primary" :loading="loading" text="退出" shape="circle" @tap="Logout"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import mixin from '@/common/mixin.js';
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [mixin],
		data() {
			return {
				loading:false
			};
		},
		components: {},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {},

		methods: {
			...mapActions(['Logout']),
			...mapMutations(['$uStore']),
			navTo(path, type) {
				if (path) {
					this.$Router.push({
						path
					});
				}
			}
		},
	}
</script>

<style lang="scss">
	.pageview {
		height: 100vh;
		background: #f7f7fc;

		&>view {
			position: relative;
		}

		.top-wrap {
			background: linear-gradient(180deg, #e1faf7 0%, #f7f7fc 79%);
			position: absolute;
			left: 0;
			width: 100%;
			height: 750upx;
			top: 0;
		}

		.userinfo {
			color: #1c2023;
			font-size: 24upx;
			z-index: 999;
			margin: 50upx 30upx 0;
			position: relative;

			.u-avatar{
				margin: 20upx auto 40upx;
				border-radius: 100%;
			}
			.list{
				border-radius: 12upx;
				//border: 1px solid rgba(0, 0, 0, 0.1);
				//box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
				transition: box-shadow 0.3s ease;
				background-color: #fff;
			}
			.item{
				padding: 40upx 40upx;
				font-size: 36upx;
				
				.name,.account{
					color: #959595;
				}
			}
			
		}
		.changePwd{
			position: fixed;
			right: 0;
			top: 280upx;
			color: #fff;
			border-radius: 45upx  0  0 45upx;
			font-size: 32upx;
			background-color:$u-primary;
			padding: 10upx 30upx;
		}
		.footerBar{
			position: absolute;
			bottom: 60upx;
			left: 20upx;
			right: 20upx;
		}
		.cardbox {
			margin: 30upx;
			padding: 22upx 0;
			background: #fff;
			box-shadow: 0px 20upx 60upx rgba(0, 87, 84, 0.05);
			border-radius: 10upx;

			.imgbox {
				width: 92upx;
				height: 92upx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.grid-text {
				font-size: 28upx;
				font-weight: 400;
				line-height: 34px;
				color: #1b0a1c;
				// padding: 14rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
			}

			.num {
				display: inline-block;
				color: #fff;
				font-size: 24upx;
				background: #fb706c;
				border-radius: 20upx;
				padding: 0 14upx;
				height: 34upx;
				position: absolute;
				top: -10px;
				right: -10px;
			}
		}

		.menu {
			padding: 0 20rpx;

			.menu-item {
				padding: 32upx 0 32upx 12upx;
				font-size: 30upx;
				color: #1c2023;

				.icon {
					width: 40upx;
					height: 40upx;
					display: block;
					margin-right: 16upx;
				}

				&+.menu-item {
					border-top: 1px solid #e3e4e5;
				}
			}
		}
	}
</style>